<template>
    <div class="app-container">
        <div class="grid-container">
            <el-row class="grid-table-tool">
                <el-col :span="24" class="tool-action">
                    <el-input v-model="searchKey" placeholder="请输入关键词" @keyup.enter="handleSearch" style="width:300px;margin-right:10px;"></el-input>

                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                    <el-button type="success" icon="el-icon-circle-plus-outline"  @click="handleAdd" >新增</el-button>
                </el-col>
            </el-row>
            <el-table :data="resp.dataList" border class="grid-table" width="100%" v-loading="loading">
                <el-table-column type="selection" width="40" align="center"> </el-table-column>
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="sex" label="性别" align="center"></el-table-column>
                <el-table-column prop="age" label="年龄" align="center"></el-table-column>
                <el-table-column prop="grade" label="年级" align="center"></el-table-column>
                <el-table-column prop="classRoom" label="班级" align="center"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <disable name="删除" :rowId="scope.row._id" @emit="handleDelete"></disable>
                    </template>
                </el-table-column>
            </el-table>
            <el-row class="grid-table-tool">
                <el-col :span="10" class="tool-action">&nbsp;</el-col>
                <el-col :span="14" class="tool-pagination">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="params.page"
                            :page-sizes="pageSizes"
                            :page-size="params.pageSize"
                            layout=" sizes, prev, pager, next,total"
                            :total="resp.total" v-if="resp.total>params.pageSize">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    import StudentDao from '@/api/StudentDao';
    import baseUtil from "../../utils/baseUtil";
    import {createNewWindow} from "../../utils/windowUtil";
    import Disable from "@/components/Disable";
    export default {
        name:"DemoList",
        components:{Disable},
        data(){
            return{
                resp:{
                    dataList:[],
                    total:0,
                },
                searchKey:'',
                params: {
                    searchParam:{},
                    page: 1, pageSize: 10,
                    order: null, sort: null
                },
                student:{
                    name:null,
                    sex:null,
                    age:null,
                    grade:null,
                    classRoom:null,
                },
                pageSizes:[10,20,30],
                loading:false,
            }
        },
        methods:{
            handleCurrentChange(val){
            },
            handleSizeChange(val){
            },
            handleAdd(){
                createNewWindow("#/studentList/detail","学生详情",1000,666)
                // this.$router.push({name: '${entity.name}Detail'})
            },
            handleEdit(index,row){
                createNewWindow("#/studentList/detail?id="+row._id,"学生详情",1000,666)
                // this.$router.push({name: '${entity.name}Detail',query:{id:row.id}})
            },
            async handleDelete(id,name) {
                this.loading = true;
                if(name == '删除') {
                    let data = { id:id, }
                    let resp = await deleteOne(data)
                    this.loading = false;
                    if(this.baseUtil.isNotBlankObj(resp) && resp.length > 0) {
                        this.$message.success('删除成功!');
                        if(this.resp.dataList.length===1 && this.params.page>1){
                            this.params.page--;
                        }
                        this.init();
                    }
                    else this.$message.warning(resp.msg||'删除失败');
                }
            },
            handleSearch(){
            },
            async init(){

            }
        },
        activated(){
            this.init();
        }
    }
</script>
<style>
    .web-user-list .el-table,.web-user-list .el-table th{
        text-align: center;
    }
</style>
